<!--
 * @Description: 提交评论、附言等的输入框
-->
<template>
  <div class="textarea-comment">
    <a-textarea
      v-if="isPostscript"
      allowClear
      v-focus.textarea
      :placeholder="placeholder"
      :maxLength="maxLength"
      v-model="commentText"
      :rows="4" />
    <AtWho
      v-else
      :maxLength="maxLength"
      v-model="commentText"
      :placeholder="placeholder"
      :pushPeopleList="pushPeopleList"
      ref="atWho"
      :rows="rows" />
    <CommentSelectPeople
      v-if="isShowSelectPeople"
      @close="isShowSelectPeople = false"
      :dataList="pushPeopleList.slice(1)"
      @selected="
        (selectedList) => {
          commentText += selectedList.map((d) => `@${d} `).join('');
          isShowSelectPeople = false;
        }
      " />
    <div class="textarea-comment-footer">
      <ul>
        <li>
          <a-popover>
            <template slot="content">
              <UploadAtt
                :fileList="attachments"
                :isSetSecretLevel="isSetSecretLevel"
                :request="{
                  upload: api.uploadFileUpload,
                  getState: api.uploadGetFileState
                }"
                :maxSize="baseInfo.businessData.other.fileUploadMaxSize" />
              <RelationAttachment :fileList="attachments" @selected="handleSelectAttachment" />
              <RelationDoc @selected="(dataList) => (relationDocs = dataList)" :area="docArea" />
            </template>
            <i class="syIcon sy-attachment"></i>
          </a-popover>
        </li>

        <li v-if="isPostscript">
          <a-checkbox v-model="isPushMessage">{{ $i18n('common.message.push.label') }}</a-checkbox>
        </li>
        <template v-else>
          <li @click="isShowSelectPeople = true" class="syIcon sy-at"></li>
          <li>
            <HideOpinion
              :isHideOpinion.sync="isHideOpinion"
              :hideOpinionObject.sync="hideOpinionObject" />
          </li>
        </template>
      </ul>
      <div>
        <a-button
          type="primary"
          size="small"
          @click="isPostscript ? submitPostscript() : submitComment()"
          >{{ $i18n('common.button.submit.label') }}</a-button
        >
        <a-button size="small" @click="$emit('close')">{{
          $i18n('common.toolbar.cancelmt.label')
        }}</a-button>
      </div>
    </div>
    <AccessoryList
      :attachments="attachments"
      :relationDocs="relationDocs"
      :areaName="docArea"
      hasDelete />
  </div>
</template>
<script>
  // 引入基础数据
  import { useBaseInfoStore } from '@/store/modules/base-info.js';
  import {mapActions, mapState} from 'pinia';
  // @人
  import AtWho from '@/components/atom/at-who';
  // 上传附件
  import UploadAtt from '@/components/upload-att';
  // 意见隐藏
  import HideOpinion from '@/components/atom/hide-opinion';
  // 关联附件
  import RelationAttachment from '@/components/relation-attachment';
  // 关联文档
  import RelationDoc from '@/components/relation-doc';
  //引入附件、关联列表集合
  import AccessoryList from '@/components/accessory-list';
  //引入关联文档对象操作
  import { clearArea } from '@/helper/relation-doc';
  //引入选人弹窗
  import CommentSelectPeople from '@/components/dialog/select-people';
  import globalData from '@/plugins/data';
  import api from '@/api';

  export default {
    name: 'TextareaComment',
    components: {
      AtWho,
      HideOpinion,
      RelationAttachment,
      RelationDoc,
      AccessoryList,
      UploadAtt,
      CommentSelectPeople
    },
    props: {
      //评论回复对象
      item: {
        type: Object
      },
      rootId:{
        //回复消息所属楼层id
        type:Number,
      },
      placeholder: {
        type: String
      },
      maxLength: {
        type: Number
      },
      //可选取推送人员列表
      pushPeopleList: {
        type: Array
      },
      isSetSecretLevel: {
        type: Boolean
      },
      //是否是附言输入
      isPostscript: {
        type: Boolean
      }
    },
    data() {
      return {
        // 文本框行数
        rows: 4,
        //是否隐藏意见
        isHideOpinion: false,
        //对那些人隐藏意见
        hideOpinionObject: {
          //0.1绝密、0.2绝密、0.3绝密、1.1秘密、0.4
          text: '',
          //Member|-8067040239322578063,Member|-7716299150402043535
          value: ''
        },
        //关联文档列表
        relationDocs: [],
        //上传附件列表
        attachments: [],
        //文本框的值
        commentText: '',
        //消息推送
        isPushMessage: true,
        isShowSelectPeople: false
      };
    },
    computed: {
      ...mapState(useBaseInfoStore, ['baseInfo']),
      docArea() {
        if (this.isPostscript) {
          return 'addPostscript';
        }
        //输入框存在地情况下，又点了回复其他人，再获取焦点
        this.$refs.atWho?.focus();
        return `reply-${this.item.id}-create`;
      }
    },
    created() {
      // 初始化数据
      this.initData();
      this.api = api;
    },
    mounted() {
      //点击回复意见，获取焦点
      if (!this.isPostscript) {
        this.$refs.atWho.focus();
      }
    },
    methods: {
      ...mapActions(useBaseInfoStore, ['validateAttachmentUploading']),
      /**
       * @description: 初始化数据
       * @param {*}
       * @return {*}
       */
      initData() {
        if (this.item) {
          console.log('item ', this.item);
          this.item.hidden !== null && (this.isHideOpinion = this.item.hidden);
          this.hideOpinionObject = {
            value: this.item.createId,
            text: this.item.createName
          };
        }
        // 清除临时关联文档的存储
        clearArea(this.docArea);
      },
      /**
       * @description: 提交评论
       * @param {*}
       * @return {*}
       */
      async submitComment() {
        //意见不能为空
        if (!this.commentText) {
          this.$message.error(this.$i18n('collaboration.common.deafult.commonNotNull'));
          return;
        }
        if (!this.validateAttachmentUploading()) {
          return;
        }

        // 过滤pushMessageUserIds数据
        const pushMessageUserIds = this.$refs.atWho.getMentionList().map((d) => d.memberId);
        console.log(pushMessageUserIds);

        // 意见隐藏：人员信息
        const showToId = this.hideOpinionObject.value;
        const submitObj = {
          replyToId: this.item.createId, // 创建评论人的id
          moduleId: this.item.moduleId, // 模块id
          pid: this.rootId||this.item.id, // 上级评论意见id
          content: this.commentText, // 评论的内容
          affairId: globalData.affairId, // 事项id
          // pushMessage: pushMessageUserIds.length !== 0, // 是否推送消息
          pushMessageUserIds, // at通知的用户id列表
          assDocDomain: this.relationDocs, //关联文档列表
          attFileDomain: this.attachments, // 附件列表
          showToId, // 允许让谁看见此消息
          subType: '0', // 0：人员节点处理的意见; 1: 超级节点自动生产的意见
          ctype: '1', // 意见类型: 回复
          hidden: this.isHideOpinion // 是否隐藏意见
        };
        console.log('提交意见', submitObj);
        //评论成功，直接把数据加进去
        this.$emit('addReply', await api.commentCommitComment(submitObj));
      },
      /**
       * @description: 提交附言
       * @param {*}
       * @return {*}
       */
      async submitPostscript() {
        //判断不能为空
        if (!this.commentText) {
          this.$message.error(this.$i18n('collaboration.common.default.fuyanNotNull'));
          return;
        }
        if (!this.validateAttachmentUploading()) {
          return;
        }
        const { moduleId, moduleType } = this.baseInfo.zwIframe.mainbody;
        //评论成功，直接把数据加进去
        this.$emit(
          'addPostscript',
          await api.commentCommitComment({
            ctype: -1,
            content: this.commentText,
            assDocDomain: this.relationDocs, //关联文档列表
            attFileDomain: this.attachments, // 附件列表
            pushMessage: this.isPushMessage,
            affairId: globalData.affairId,
            moduleId,
            moduleType
          })
        );
      },
      // 更新关联附件
      handleSelectAttachment(attachmentList) {
        this.attachments.push(...attachmentList);
      }
    }
  };
</script>
<style lang="scss">
  .textarea-comment {
    > .textarea-comment-footer {
      display: flex;
      padding: 3px 10px 3px 13px;
      background-color: #f4f5f8;
      justify-content: space-between;
      align-items: center;

      > ul {
        display: flex;
        align-items: center;

        > li {
          margin-right: 20px;

          &.syIcon {
            cursor: pointer;
          }

          &:hover {
            color: $primary-color;
          }
        }
      }

      > div {
        > button {
          margin-left: 10px;
        }
      }
    }

    > .ant-mentions {
      textarea {
        &:hover {
          border: 0;
        }
      }
    }

    .hide-opinion > div > div {
      height: 24px;
      line-height: 1;
    }
  }

  .ant-popover-inner-content {
    > div {
      &:first-child ~ div {
        margin-top: 10px;
      }
    }
  }
</style>
